<div class="issue-page-config container-fluid">

  <div class="row">
    <div class="edit-toolbar col-xl-12">
      <div class="title">
        <span>{{page.name}}</span>
      </div>
      <div class="buttons">
        <button (click)="back()" type="button"
                class="btn btn-secondary btn-with-icon btn-sm back">
          <i class="fa fa-arrow-circle-left"></i>返回
        </button>
      </div>
    </div>
  </div>
  <hr/>

  <div class="main">
    <div class="left" [style.height]="contentHeight">
      <div class="form-group row">
        <div id="sortable-container-left" class="col-sm-12 elements"
             dnd-sortable-container
             [draggable]="false" [dropZones]="['fields-zone']" [sortableData]="page.elements"
             (onDropSuccess)="onElementDropSuccess($event)">

          <ng-container *ngFor="let elem of page.elements; let i = index;">
            <div dnd-sortable [dragEnabled]="elem.colCode!='title'" [sortableIndex]="i" [dragData]="elem"
                 (onDropSuccess)="onElementDropSuccess($event)"
                 id="sortable-left-{{elem.id}}" [class.full-line]="elem.fullLine" class="element">
              <issue-field-design [form]="form" (propEvent)="setProp($event)" [field]="elem"
                                  [issuePropMap]="issuePropMap"></issue-field-design>
            </div>
          </ng-container>

          <div class="no-elems clear-both"> 拖动字段到此处 </div>
        </div>
      </div>
    </div>

    <div id="sortable-container-right" class="right" [style.height]="contentHeight"
         dnd-sortable-container [draggable]="false" [dropZones]="['fields-zone']" [sortableData]="fields"
         (onDropSuccess)="onElementDropSuccess($event)">

      <div id="sortable-right-{{field.id}}" *ngFor="let field of fields; let i = index;" class="field-row"
           dnd-sortable [sortableIndex]="i" [dragData]="field"
           (onDropSuccess)="onElementDropSuccess($event)"
      >
        <issue-field-design [form]="form" [field]="field" [forSelection]="true" [issuePropMap]="issuePropMap"></issue-field-design>
      </div>
    </div>

  </div>

  <pop-dialog #modalWrapper (confirm)="delete()" [title]="'提示'">
    确认删除名为"{{page.label}}"的用例类型?
  </pop-dialog>

</div>
